<template>
  <div>
    <div>
      <a href="#" @click="showDict(false)" style="font-weight: bold;text-decoration: underline;">{{currentNum}}</a>
      <el-button type="text" icon="el-icon-setting" v-show="is_org_edit" 
      v-hasPermi="['labdata:labdict:edit']"
      @click="showDict(true)" size="small" style="margin-left: 10px;">设置</el-button>
    </div>
    <!-- 添加或修改实验室安全字典对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div v-show="!showEdit">
          <el-row v-for="(item, myIndex) in labDictDataGroup" :key="myIndex">
              <div v-if="!item.isChild" style="margin-left: 20px;font-weight: bold;font-size: 14px;" v-text="item.title"></div>
              <div style="margin-left: 30px;margin-bottom: 10px;margin-top: 10px;" >
                  <span v-if="item.isChild" v-text="item.title" style="margin-right: 10px;font-weight: bold;font-size: 13px;"></span>
                  <span v-if="!item.checked && item.datas.length>0" style="line-height: 30px; margin-right: 10px;font-weight: bold;font-size: 13px;">无</span>
                  <el-button size="mini" :type="buttonType"  v-for="(dict,index) in item.datas" :key="item.logotypeId" v-if="dict.checked">{{dict.name}}</el-button>
              </div>
          </el-row>
      </div>
      <div v-show="showEdit">
          <el-row v-for="(item, myIndex) in labDictDataGroup" :key="myIndex">
              <div v-if="!item.isChild" style="margin-left: 20px;font-weight: bold;font-size: 14px;" v-text="item.title"></div>
              <div style="margin-left: 30px;" >
                  <span v-if="item.isChild" v-text="item.title" style="margin-right: 10px;font-weight: bold;font-size: 13px;"></span>
                  <el-checkbox @change="changeNum(dict.checked)" style="line-height: 30px;" v-for="(dict,index) in item.datas" v-model="dict.checked" :key="index" :label="dict.logotypeId">{{dict.name}}</el-checkbox>
              </div>
          </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listLabdict, addLabdict, getLabLogotype} from "@/api/labdata/labdict";
export default {
  name: "LabdictCom",
  data() {
    return {
      buttonType : 'success',
      showEdit : false,
      currentNum:0,
      //是否机构处于编辑状态
      is_org_edit: false,
      // 遮罩层
      loading: true,
      //实验室安全字典表格数据
      labdictList: [],
      //标识数据
      logotypeList:[],
      //字典数据
      labDictDataOptions: [],
      //字典数据分类列表,用于显示
      labDictDataGroup:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        labId: null,
        logotypeId: null
      },

    };
  },
  props: {
      labId: Number,
      isEdit: Boolean,
      //实际为数字，是标签的分类标识
      dictType: String,
      dictName: String,
  },
  watch: {
      labId:function(newVal, oldVal){
        this.queryParams.labId = newVal;
         this.getList();
      },
      isEdit:function(newVal, oldVal){
        this.is_org_edit = newVal;
      }
  },
  created() {
    this.queryParams.labId = this.$props.labId;
    this.queryParams.logoKindId = this.$props.dictType;
    if(this.$props.dictType == '1'){
      this.buttonType = 'warning';
    }else if(this.$props.dictType == '2'){
       this.buttonType = 'danger';
    }
    this.getList();
    /*
    this.getDicts(this.$props.dictType).then(response => {
      this.labDictDataOptions = response.data;
    });
    */
   getLabLogotype(this.$props.dictType).then(response=>{
       this.logotypeList = response.data;
   });
  },
  methods: {
    /** 查询实验室安全字典列表 */
    getList() {
      this.loading = true;
      listLabdict(this.queryParams).then(response => {
        this.labdictList = response.rows;
        this.currentNum = this.labdictList.length;
        this.loading = false;
      });
    },

    changeNum(checked){
      if(checked){
        this.currentNum ++;
      }else{
        this.currentNum --;
      }
    },
    refreshData(isEdit, orgId){
      this.is_org_edit = isEdit;
      this.queryParams.labId = orgId;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.groupByDictData();
      this.currentNum = this.labdictList.length;
      this.open = false;
    },
    groupByDictData(){
      this.labDictDataGroup = {};
      this.logotypeList[this.logotypeList.length] = {no:""};
      for(let i=0;  i < this.logotypeList.length -1; i++){
         let logotype = this.logotypeList[i];
         logotype.checked = false;
         let noArr = logotype.no.split('.');
         let nodeFlag = 'n_'+noArr[0];
         if(noArr.length==1){
             this.labDictDataGroup[nodeFlag] = {};
             this.labDictDataGroup[nodeFlag].title = logotype.name;
             this.labDictDataGroup[nodeFlag].datas = new Array();
             this.labDictDataGroup[nodeFlag].isChild = false;
             continue;
         }else{
             let nextNoArr = this.logotypeList[i+1].no.split('.');
             if(nextNoArr.length > noArr.length){
                for(var j=1; j<noArr.length; j++){
                  nodeFlag = nodeFlag+'.'+noArr[j];
                }
                this.labDictDataGroup[nodeFlag] = {};
                this.labDictDataGroup[nodeFlag].title = logotype.name;
                this.labDictDataGroup[nodeFlag].datas = new Array();
                this.labDictDataGroup[nodeFlag].isChild = true;
                continue;
             }else{
               for(var j=1; j<noArr.length -1; j++){
                 nodeFlag = nodeFlag+'.'+noArr[j];
               }
               if(this.labDictDataGroup[nodeFlag]){
                 this.labDictDataGroup[nodeFlag].datas.push(logotype);
               }
            }
          }
          for(let k=0; k<this.labdictList.length;k++){
            if(this.labdictList[k].logotypeId == logotype.logotypeId){
              logotype.checked = true;
              this.labDictDataGroup[nodeFlag].checked=true;
            }
          }
        }
    },
    /** 新增按钮操作 */
    showDict(showModel) {
      this.showEdit = showModel;
      this.groupByDictData();
      this.title = this.$props.dictName + '设置';
      this.open = true;

    },
    /** 提交按钮 */
    submitForm() {
      if(!this.is_org_edit){
         this.open = false;
         return;
      }
      let form = new Object();
      form.labId = this.queryParams.labId;
      form.dictType = this.queryParams.dictType;
      form.delDictRelIds = new Array();
      form.addReldictValues = new Array();
      // 表单参数
     for(let i=0;  i < this.logotypeList.length; i++){
         var logotype = this.logotypeList[i];
         if(logotype.checked){
           form.addReldictValues.push(logotype.logotypeId)
         }
     }
     for(let k=0; k < this.labdictList.length; k++){
        let labdictItem = this.labdictList[k];
        let isContain = false;
        for(let n=0; n < form.addReldictValues.length; n++){
          if(form.addReldictValues[n] == labdictItem.logotypeId){
            isContain = true;
            form.addReldictValues.splice(n,1);
            break;
          }
        }
        if(!isContain){
           form.delDictRelIds.push(labdictItem.dictRelId);
        }
     }
     addLabdict(form).then(response => {
        this.msgSuccess("设置成功");
        this.getList();
        this.open = false;
      });
    },

  }
};
</script>
